<template>
    <div>
        <!-- 对话框——start -->
        <el-dialog
            title="修改摄像头信息"
            :visible="dialogVisible"
            style="text-align: center"
            @open="openDialog"
            :before-close="closeDialog"
        >
            <!-- 表单——start -->
            <el-form
                :model="info"
                status-icon
                :rules="infoFormRules"
                ref="infoFormRef"
                label-width="6.25rem"
            >
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="基地:" label-width="100px">
                            <el-input
                                disabled
                                v-model="baseInfo.name"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item
                            label="使用场景:"
                            prop="type"
                            style="text-align: left"
                            label-width="100px"
                        >
                            <el-select
                                v-model="info.type"
                                placeholder="请选择"
                                @change="typeChange"
                            >
                                <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item
                            label="鸽棚:"
                            prop="dovecoteNumber"
                            label-width="100px"
                        >
                            <el-input
                                v-model="info.dovecoteNumber"
                                :disabled="isBase"
                            ></el-input> </el-form-item
                    ></el-col>
                    <el-col :span="12">
                        <el-form-item
                            label="录像名称:"
                            prop="videoName"
                            label-width="100px"
                        >
                            <el-input
                                placeholder="请输入"
                                v-model="info.videoName"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item
                            label="创建人:"
                            prop="createBy"
                            label-width="100px"
                        >
                            <el-input
                                placeholder="请输入"
                                v-model="info.createBy"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item
                            label="设备序列号:"
                            prop="deviceSerial"
                            label-width="100px"
                        >
                            <el-input
                                placeholder="请输入"
                                v-model="info.deviceSerial"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item
                            label="管道序号:"
                            prop="aisle"
                            label-width="100px"
                        >
                            <el-input
                                placeholder="请输入"
                                v-model="info.aisle"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item
                            label="设备验证码:"
                            prop="validateCode"
                            label-width="100px"
                        >
                            <el-input
                                placeholder="请输入"
                                v-model="info.validateCode"
                            ></el-input> </el-form-item
                    ></el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item
                            label="位置:"
                            prop="monitoringLocation"
                            label-width="100px"
                        >
                            <el-input
                                :rows="2"
                                v-model="info.monitoringLocation"
                                placeholder="请输入摄像头的位置"
                                style="height: 3.75rem"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item
                            label="状态:"
                            prop="statusCode"
                            style="text-align: left"
                            label-width="100px"
                        >
                            <el-switch
                                v-model="info.statusCode"
                                :active-value="1"
                                :inactive-value="0"
                                active-color="#13ce66"
                                inactive-color="#dcdfe6"
                            >
                            </el-switch>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item>
                    <el-button type="primary" @click="inputInfo()"
                        >提交</el-button
                    >
                    <el-button @click="closeDialog()">取消</el-button>
                </el-form-item>
            </el-form>
            <!-- 表单——end -->
        </el-dialog>
        <!-- 对话框——end -->
    </div>
</template>
<script>
import { mapState } from "vuex";
export default {
    name: "upDateMonitorInfo",
    data() {
        return {
            info: {}, //表单数据
            tempInfo: {
                //临时的表单数据，用于初始化表单
                aisle: "",
                baseId: "",
                createBy: "",
                deviceSerial: "",
                dovecoteNumber: "",
                monitoringLocation: "",
                statusCode: 0,
                type: "",
                validateCode: "",
                videoName: "",
            },
            infoFormRules: {
                //验证规则
                dovecoteNumber: [
                    {
                        message: "请输入鸽棚编号",
                        trigger: "blur",
                    },
                ],
                videoName: [
                    {
                        required: true,
                        message: "请输入录像名称",
                        trigger: "blur",
                    },
                ],
                createBy: [
                    {
                        required: true,
                        message: "请输入创建人姓名",
                        trigger: "blur",
                    },
                ],
                monitoringLocation: [
                    {
                        required: true,
                        message: "请输入摄像头的位置",
                        trigger: "blur",
                    },
                ],
                aisle: [
                    {
                        required: true,
                        message: "请输入管道序号",
                        trigger: "blur",
                    },
                ],
                // validateCode: [ //由于现在还没有值
                //     {
                //         required: true,
                //         message: "请输入设备验证码",
                //         trigger: "blur",
                //     }
                // ],
                deviceSerial: [
                    {
                        required: true,
                        message: "请输入设备序列号",
                        trigger: "blur",
                    },
                ],
            },
            options: [
                //下拉框配置
                {
                    value: "1",
                    label: "基地",
                },
                {
                    value: "2",
                    label: "鸽棚",
                },
                {
                    value: "3",
                    label: "投喂机",
                },
                {
                    value: "4",
                    label: "其他",
                },
            ],
            isBase: false, //是否选择基地，选择了就不用填鸽棚
        };
    },
    computed: {
        ...mapState({
            baseInfo: (
                state //基地信息
            ) => state.Usersetting.BaseInfo,
        }),
    },
    props: {
        monitorinfo: {
            Object,
            default: {},
        },
        dialogVisible: {
            Boolean,
            default: false,
        },
        isUpdate: {
            Boolean,
            default: false,
        },
    },
    // watch: { //不用watch，由于它是数据有改变后才触发的，若用户修改数据但是有不想保存了，下次打开的时候还是会有他编辑过的痕迹，所以采用打开对话框的时候就重新赋值
    //     monitorinfo: {
    //         //监听传过来的摄像头对应信息
    //         handler(newData, oldData) {
    //             if (newData.type == "基地") {
    //                 newData.type = "1"; //由于父组件表格展示时把数字转换为对应的意思，现在把它转回来，并将数据里的type设置为字符串，下拉框才可根据这个value显示对应label
    //             } else if (newData.type == "鸽棚") {
    //                 newData.type = "2";
    //             } else if (newData.type == "鸽笼") {
    //                 newData.type = "3";
    //             }
                // console.log("深度监听");
    //             this.info = JSON.parse(JSON.stringify(newData))
    //             // this.info = newData;
    //             console.log(this.info);

    //         },
    //         deep: true,
    //     },
    // },
    methods: {
        // //对话框打开
        openDialog() {
            // console.log("open");
            if (this.isUpdate) {
                // console.log("执行");
                this.info = JSON.parse(JSON.stringify(this.monitorinfo)); //对象拷贝，防止子组件对数据的修改影响父组件
                // console.log(this.info);
                delete this.info.gmtModified; //原有的数据里这三个属性是不要的，去除
                delete this.info.videoUrl;
                delete this.info.id;

                if (this.info.type == "基地") {
                    this.info.type = "1"; //由于父组件表格展示时把数字转换为对应的意思，现在把它转回来，并将数据里的type设置为字符串，下拉框才可根据这个value显示对应label
                } else if (this.info.type == "鸽棚") {
                    this.info.type = "2";
                } else if (this.info.type == "投喂机") {
                    this.info.type = "3";
                } else if (this.info.type == "其他") {
                    this.info.type = "4";
                }
            } else {
                this.info = JSON.parse(JSON.stringify(this.tempInfo)); //对象拷贝，给info初始化，由于这个组件是更新和添加共用的，作为更新时的对话框，info有被赋值
                // console.log(this.info);
            }

            // console.log(this.info);
        },

        //关闭对话框
        closeDialog() {
            // console.log("关闭对话框");
            this.$emit("closeDialog");
        },

        //选择使用场景
        typeChange(value) {
            // console.log("使用场景改变");
            // console.log(typeof value);
            if (value === "1") {
                this.isBase = true;
            } else {
                this.isBase = false;
            }
        },

        //提交修改
        inputInfo() {
            let that = this;
            this.$refs["infoFormRef"].validate(async (valid) => {
                if (valid) {
                    return that.$emit("inputInfo", this.info); //提交更新信息
                } else {
                    return that.$message.error("表单信息有误！");
                }
            });
        },
    },
};
</script>
<style lang="scss" scoped >
</style>